<template>
  <div class="">
    <el-dialog :title="title" :visible="showpopups" @close="onClose">
      <el-form ref="ruleForm" label-width="100px" :model="ruleForm" :rules="rules">
        <el-form-item label="文章标题:" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>

        <el-form-item label="文章内容:" prop="articleBody">
          <div style="height:250px">
            <quill-editor v-model="ruleForm.articleBody" style="height:200px" :options="editorOption"> </quill-editor>
          </div>
        </el-form-item>

        <el-form-item v-if="state" label="视频地址:">
          <el-input v-model="ruleForm.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span v-if="state" slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addArticles, editArticles } from '@/api/articles';
export default {
  name: '',
  components: {},
  props: {
    showpopups: {
      type: Boolean,
      default: false
    },
    state: {
      type: Boolean,
      default: true
    },
    ruleForm: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block', 'image', 'link']
          ]
        }
      }
    };
  },
  computed: {
    title() {
      if (this.ruleForm.id && this.state) {
        return '修改';
      } else if (!this.state) {
        return '预览';
      } else {
        return '新增';
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 关闭
    onClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit('onClose');
      this.$emit('update:showpopups', false);
    },
    // 确定
    btnOk() {
      this.$refs.ruleForm.validate(async validate => {
        if (validate) {
          if (this.ruleForm.id) {
            try {
              await editArticles(this.ruleForm);
              this.$emit('btnOk');
              this.$emit('update:showpopups', false);
              this.$message.success('操作成功');
              this.onClose();
            } catch (err) {
              this.$message.error('操作失败');
            }
          } else {
            try {
              await addArticles(this.ruleForm);
              this.$emit('btnOk');
              this.$emit('update:showpopups', false);
              this.$message.success('操作成功');
              this.onClose();
            } catch (err) {
              this.$message.error('操作失败');
            }
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .ql-editor.ql-blank::before {
  content: none;
}
::v-deep .ql-toolbar.ql-snow {
  padding: 0;
}
</style>
